<template>
  <div class="dataContainer">
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="品种 / 标的 / 期权合约代码: ">
          <el-input v-model="queryParams.code" placeholder="请输入合约代码"  @keyup.enter="onSearch"  style="width: 180px;"/>
      </el-form-item>
      <el-form-item label="订阅行情: ">
          <el-select v-model="queryParams.subscriptionFlag" placeholder="请选择订阅行情" collapse-tags clearable  style="width: 180px">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
        <el-button size="small" type="primary" @click="openAddModal()"><el-icon><Plus /></el-icon>新增品种 </el-button>
      </el-form-item>
    </el-form>
    <!-- Table start -->
    <div :style="{height: tableHeight}">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
            v-if="!tableLoading"
            ref="treeV2Ref"
            :columns="columns"
            :data="tableData"
            :expand-column-key="expandColumnKey"
            :width="width"
            :height="height-20"
            row-key="id"
            :row-height="35"
            fixed
        >   
            <!-- 表头 -->
            <template #header-cell="scope">
                <template v-if="scope.column.key === 'selection'">
                    <el-checkbox size="large" @change="selectAllChange"/>
                </template>
                <span v-else>{{ scope.column.title }}</span>
            </template>
        </el-table-v2>
        </template>
      </el-auto-resizer>
    </div>
    <AddOrUpdate  ref="addOrUpdateRef"  @flushTable="selectByList" />
    <AddOrUpdate2 ref="addOrUpdateRef2" @flushTable="selectByList" />
    <AddOrUpdate3 ref="addOrUpdateRef3" @flushTable="selectByList" />
  </div>
</template>
<script>
import {  ElButton } from "element-plus";
import { selectByList, deleteInstrument, getInstrumentByPID,selectByPage } from '@/api/oss/instrument.js'
import { mapState } from 'vuex'
import AddOrUpdate from './addOrUpdate.vue'
import AddOrUpdate2 from './addOrUpdate2.vue'
import AddOrUpdate3 from './addOrUpdate3.vue'
import { h } from "vue";
export default {
  components:{
    AddOrUpdate,
    AddOrUpdate2,
    AddOrUpdate3,
  },
  data() {
      return {
        tableTotal: 0,
        tableLoading: false,
        tableData: [],
        expandColumnKey:'name', // 列的 key 来标记哪个行可以被展开
        // 查询参数
        queryParams: {
            pageNo: 1,
            pageSize: 500,
            code:'',
            subscriptionFlag:'',
        },
        treeDataProps:{
            children: 'children',
        },
        tableHeight:(window.innerHeight - 380) + 'px',
        columns:[
                { key: 'name', dataKey: 'name', title: '名称', width: 190, align:'left'},
                { key: 'code', dataKey: 'code', title: 'code', width: 160, align:'left'},
                { key: 'varietyType', dataKey: 'varietyType', title: '品种类别', width: 160, align:'left'},
                { key: 'volumeMultiple', dataKey: 'volumeMultiple', title: '交易单位', width: 120, align:'left'},
                { key: 'tradeMarginRate', dataKey: 'tradeMarginRate', title: '保证金比率', width: 160, align:'left'},
                { key: 'lastPriceCode', dataKey: 'lastPriceCode', title: '行情代码', width: 160, align:'left'},
                { key: 'subscriptionFlag', dataKey: 'subscriptionFlag', title: '订阅行情', width: 120, align:'center',
                cellRenderer:({rowData})=>{
                  if (rowData.subscriptionFlag==0) {
                    return '否'
                  } else {
                    return '是'
                  }
                }
                },
                { key: 'id', dataKey: 'id', title: '操作', width: 250,
                    cellRenderer:({rowData})=>{
                      // 第三级不展示, 用一个空白按钮占位置, 为了所有的按钮对齐
                      let emptyBtn = h(
                                ElButton,
                                {type:"primary",id:"emptyBtn"},
                                {default: () => '新增三级'}
                            )
                      let ad1 = h(
                                ElButton,
                                {onClick: () => this.addRow(rowData)  , type:"primary"},
                                {default: () => '新增标的'}
                            )
                      let ad2 = h(
                                ElButton,
                                {onClick: () => this.addRow(rowData)  , type:"primary"},
                                {default: () => '新增期权'}
                            )
                      let remove = h(
                                ElButton,
                                {onClick: () => this.deleteRow(rowData)  , type:"danger"},
                                {default: () => '删 除'}
                            )
                      let update = h(
                              ElButton,
                              {onClick: () => this.editRow(rowData) },
                              {default: () => '修 改'}
                          )
                      if (rowData.level==1) {
                        return [ad1,update,remove]
                      } else if (rowData.level==2) {
                        return [ad2,update,remove]
                      } else {
                        return [emptyBtn,update,remove]
                      }
                      
                        
                    }
                 },
              ],
      }
  },
  created() {
  },
  computed:{
      ...mapState(['amplify'])
  },
  mounted(){
      this.$nextTick(()=>{
          this.countTableHeight()
          this.selectByList()
      })
  },
  methods: {
    deleteRow(row){
      let msg = "请确认是否删除 ?";
      if (row.level==1 || row.level==2) {
        msg = "请确认是否删除(删除自身和他的子节点数据) ?";
      }
      this.$confirm(msg, "警告  ! ! !", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
      }).then(() => {
          deleteInstrument({id:row.id}).then(res => {
              if (res.code == 1) {
              this.$message.success(res.message)
              // 重新获取数据
              this.onSearch()
              } else {
              this.$message.error(res.message)
              }
          })
      })
    },
    // 打开新增弹窗事件
    openAddModal() {
      this.$refs.addOrUpdateRef.openModal(undefined)
    },
    addRow(row){
      // 新增二级菜单
      if (row.level == 1) {
        this.$refs.addOrUpdateRef2.openModal(row.id,undefined)
      } else if (row.level == 2) {
        this.$refs.addOrUpdateRef3.openModal(row.id,undefined)
      }
    },
    editRow(row){
      if (row.level == 1) {
        this.$refs.addOrUpdateRef.openModal(row.id)
      } else if (row.level == 2) {
        this.$refs.addOrUpdateRef2.openModal(row.pid,row.id)
      } else if (row.level == 3) {
        this.$refs.addOrUpdateRef3.openModal(row.pid,row.id)
      }
    },
    // 搜索事件
    onSearch() {
        this.queryParams.pageNo = 1
        this.selectByList()
    },
    // 分页查询事件
    selectByList() {
        this.tableLoading = true
        selectByList(this.queryParams).then((res) => {
          this.tableLoading = false
          if (res.code === 1) {
              this.tableData = res.data
          }
        }).catch(() => {
            this.tableLoading = false
        })
    },
    // 表格高度
    countTableHeight(){
      let tableHeight = (window.innerHeight - 380) + 'px'
      // 计算搜索区域
      var searchContainerList =  document.getElementsByClassName("searchContainer")
      if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                let searchContainerHeight = searchContainerList[0].offsetHeight
                // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                let staticHeight = 60+38+30+15
                if (this.amplify == true) {
                    // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                    tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                } else {
                    tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                }
                this.tableHeight = tableHeight
            }
    },
  },
  watch: {
      amplify(newValue,oldValue) {
          this.countTableHeight()
      },
  },
}
</script>
<style lang="css" scoped>
:deep(.el-scrollbar) {
    text-align: left;
}
:deep(#emptyBtn) {
    visibility: hidden;
}
</style>